<template>
  <div class="objective-factors-wrap">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="title-card">
          <span class="title-name">{{groupName}}</span>
          <span class="title-points-num" v-show="deductNum > 0" >{{'-'+deductNum}}</span>
          <span class="title-points-desc">{{desc}}</span>
        </div>
      </el-col>
      <el-col :span="24">
        <div class="content-card">
          <div class="objective-card-item" v-for="(item, index) in dataList" :key="index">
            <p class="deuct-point color-1" v-if="item.deduct > 0">{{'-' + item.deduct}}</p>
            <p v-else class="deuct-point iconfont icon-duigou color-3"></p>
            <p class="objective-name">{{item.name}}</p>
            <p v-if="item.deductDetails[0].fbsAge != undefined" class="objective-desc">{{item.deductDetails[0].fbsAge}}年</p>
            <p v-else class="objective-desc">{{item.deductDetails[0].grade}}级</p>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getSafetyGroup } from '@/api/home'

export default {
  name: 'ObjectiveFactors',
  props: {
    orgId: {
        required: true
    },
    safetyRecordId: {
        required: true
    },
    groupId: {
        required: true
    },
  },
  data () {
    return {
      groupName: '',
      desc: '',
      deductNum: '',
      dataList: [],
    }
  },
  created() {
    this.getDetailData()
  },
  methods: {
    getDetailData() {
      let that = this
      let parames = {
        orgId: that.orgId,
        groupId: that.groupId,
        safetyRecordsId: that.safetyRecordId
      }
      getSafetyGroup(parames).then(res => {
        if(res.status === 200) {
          that.groupName = res.data.groupName || '消防设施单元'
          that.deductNum = res.data.deduct
          that.desc = res.data.title
          that.dataList = res.data.details
        }
      })
    },
    // 更新/刷新模块
    refreshModel() {
      this.getDetailData()
    }
  }
}
</script>

<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.objective-factors-wrap {
  .content-card {
    display: flex;
    border: none;
    padding: 0;
    flex-wrap: wrap;
    justify-content: space-between;
    .objective-card-item {
      border: 1px solid #E1E1E1;
      width: calc(50% - 8px);
      height: 130px;
      background-color: #fff;
      text-align: center;
      .deuct-point {
        margin-top: 10px;
        padding-right: 20px;
        text-align: right;
        font-size: 16px;
        font-weight: 100;
      }
      .objective-name {
        font-size: 18px;
        height: 30px;
        line-height: 30px;
        color: #2F3444;
      }
      .objective-desc {
        height: 50px;
        line-height: 50px;
        font-size: 36px;
        font-weight: 400;
        color: #4CA4FE;
      }
    }
  }
}
</style>
